<template>
  <a-modal :open="open" :width="860" title="选择参保险种" centered @ok="onOk" @cancel="onCancel">
    <div class="overflow-auto h-[400px]">
      <div class="flex items-center flex-1 overflow-hidden mt-4">
        <div class="w-12">
          <a-avatar :size="48" :src="avatarMan" />
        </div>
        <div class="flex-1 ml-4">
          <div class="flex mb-1">
            <div class="w-1/4 flex" style="width: 200px">
              <p class="mb-0 mr-2 font-bold">{{ resourceData.baseinfo.psn_name }}</p>
              <p class="mb-0 mr-2 font-bold">{{ resourceData.baseinfo.xb }}</p>
              <p class="mb-0 font-bold">{{ resourceData.baseinfo.age }}</p>
            </div>
            <LabelValue label="民族" label-class="font-bold" value-class="font-bold" :width="240" :value="resourceData.baseinfo.natyName" />
            <LabelValue label="出生日期" label-class="font-bold" value-class="font-bold" :width="200" :value="resourceData.baseinfo.brdy" />
          </div>
          <div class="flex">
            <LabelValue label="人员编号" label-class="font-bold" value-class="font-bold" :width="200" :value="resourceData.baseinfo.psn_no" />
            <LabelValue label="证件类型" label-class="font-bold" value-class="font-bold" :width="240" :value="resourceData.baseinfo.psn_cert_typeName" />
            <LabelValue label="证件号码" label-class="font-bold" value-class="font-bold" :width="220" :value="resourceData.baseinfo.certno" />
          </div>
        </div>
      </div>
      <a-divider style="margin: 16px 0px 0px 0px; border-color: rgba(5, 5, 5, 0.2)" dashed />
      <div v-if="resourceData?.yxinsuinfo && resourceData.yxinsuinfo.length > 0">
        <p class="query-title mb-2 mt-4">请选择一项参保</p>
        <div
          v-for="(item, index) in resourceData.yxinsuinfo"
          :key="index"
          class="query-border flex flex-wrap mb-2 cursor-pointer"
          :class="{ 'select-active': selectedItem.insutype === item.insutype }"
          @click="onSelect(item)"
        >
          <p class="font-bold mb-3" style="width: 150px">{{ item.insutypeName }}</p>
          <LabelValue label="参保日期" value-class="font-bold" :width="180" :value="item.psn_insu_date" />
          <LabelValue label="暂停日期" value-class="font-bold" :width="180" :value="item.paus_insu_date" />
          <LabelValue label="状态" value-class="font-bold" :width="130" :value="item.psn_insu_stas === '1' ? '有效' : '失效'" />
          <LabelValue label="余额" value-class="font-bold" :width="140" :value="item.balc.toString()" />
          <LabelValue label="人员类别" value-class="font-bold" :width="150" :value="item.psn_typeName" />
          <LabelValue label="参保地划分" value-class="font-bold" :width="180" :value="item.insuplc_admdvs" />
          <LabelValue label="公务员标志" value-class="font-bold" :width="180" :value="item.cvlserv_flagName" />
          <LabelValue label="单位" value-class="font-bold" :width="260" :value="item.emp_name" />
        </div>
      </div>
      <div v-if="resourceData?.idetinfo && resourceData.idetinfo.length > 0">
        <p class="query-title mb-2 mt-4">身份信息</p>
        <div v-for="(item, index) in resourceData.idetinfo" :key="index" class="query-border flex flex-wrap mb-2">
          <p class="font-bold mb-0" style="width: 150px">职工基本医疗保险</p>
          <LabelValue label="类别等级" value-class="font-bold" :width="180" :value="item.psn_type_lv" />
          <LabelValue label="有效时间" value-class="font-bold" :width="310" :value="item.endtime" />
          <LabelValue label="备注" value-class="font-bold" :width="130" :value="item.memo" />
        </div>
      </div>
      <!-- <div>
        <p class="query-title mb-2 mt-4">待遇信息</p>
        <div v-for="item in 2" :key="item" class="query-border flex flex-wrap mb-2">
          <p class="font-bold mb-0" style="width: 330px">病种名称一</p>
          <LabelValue label="病种代码" value-class="font-bold" :width="310" value="2022-02-02" />
          <LabelValue label="有效时间" value-class="font-bold" :width="130" value="有" />
        </div>
      </div> -->
    </div>
    <template #footer>
      <a-button key="back" @click="onCancel">取消</a-button>
      <a-button key="submit" type="primary" @click="onOk">保存</a-button>
    </template>
  </a-modal>
</template>
<script setup>
import { ref } from 'vue'
import avatarMan from '@/assets/images/avatar-man.png'

const emit = defineEmits(['update:open', 'ok'])
defineProps({
  open: Boolean,
  resourceData: {
    type: Object,
    default: () => ({})
  }
})
const selectedItem = ref({})
const onCancel = () => {
  emit('update:open', false)
}
const onSelect = (row) => {
  selectedItem.value = row
}
const onOk = () => {
  emit('ok', selectedItem.value)
  emit('update:open', false)
}
</script>
<style lang="less" scoped>
.query-title {
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}
.query-border {
  padding: 6px 10px;
  border: 1px dashed rgba(5, 5, 5, 0.2);
}
.select-active {
  color: var(--primary-color);
  background: var(--secondary-color) !important;
  border: 1px solid var(--primary-color) !important;
}
</style>
